<template>
	<view class="container">
		<view class="bar">
			<image src="../../static/image/back.png" class="back" @click="back"></image>
			<input type="text" value="" placeholder="请输入关键词"/>
			<view class="button">
				<image src="../../static/image/search(1).png" class="search"></image>
				<span style="color: #FFFFFF;font-size: 26rpx;font-weight: bold;margin-left: 16rpx;">搜索</span>
			</view>
			
		</view>
		<view class="content">
			<navigator class="box" v-for="(item,index) in list" url="../shop-detail/shop-detail" :key="index">
				<view class="img">
					<image class="titleImg" src="../../static/image/store-img.png" mode=""></image>
					<view class="recommend">{{item.tuijian}}</view>
					<view class="img-num" v-if="item.number > 0">{{item.number}}</view>
				</view>
				<view class="box-right">
					<view class="rightTitle">
						<view class="titleLeft">
							<view class="leftText">{{item.title}}</view>
							<view class="leftname">{{item.shuiguo}}</view>
						</view>
						<view class="titleRight">
							<view class="rightImg">
								<image class="img1" src="../../static/image/store-img.png" mode=""></image>
								<view class="km">{{item.km}}km</view>
							</view>
							
						</view>
					</view>
					<view class="centerText">
						科学大道与瑞达路交叉口中原广告产业园1号楼9-23
					</view>
					<view class="boxBotton">
						<view class="btn">贴心服务</view>
						<view class="btn">蔬菜水果</view>
						<view class="btn">即可配送</view>
						<view class="maxBtn">逛逛店铺</view>
					</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return{
				list: [
					{
						id: 1,
						tuijian: '推荐商户',
						number: 3,
						title:'小商水果店铺',
						shuiguo: '水果',
						address: '科学大道与瑞达路交叉口中原广告产业园1号楼9-23',
						km: '1.7'
					},
					{
						id: 2,
						tuijian: '推荐商户',
						number: 0,
						title:'小商水果店铺',
						shuiguo: '水果',
						address: '科学大道与瑞达路交叉口中原广告产业园1号楼9-23',
						km: '1.7'
					}
				]
			}
		},
		methods:{
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	*{
		margin: 0;
		padding: 0;
	}
	.bar{
		height: 84rpx;
		display: flex;
		position: relative;
		padding-left: 27rpx;
		background: linear-gradient(90deg, #F41640, #EE4F69);
	}
	.back{
		width: 20rpx;
		height: 38rpx;
		position: absolute;
		top: 50%;
		margin-top: -21rpx;
		z-index: 10;
	}
	.button{
		position: absolute;
		right: 29rpx;
		line-height: 84rpx;
	}
	.bar input{
		width: 533rpx;
		height: 54rpx;
		font-size: 26rpx;
		text-align: center;
		position: absolute;
		top: 50%;
		left: 70rpx;
		margin-top: -27rpx;
		background: #FFFFFF;
		border-radius: 27rpx;
	}
	.search{
		width: 28rpx;
		height: 29rpx;
	}
	.content{
		padding: 10rpx;
	}
	.box{
		display:flex;
		.img{
			// width: 20%;
			// height: 100%;
			position: relative;
			border-radius:12rpx;
			margin-right:20rpx;
			.titleImg {
				width: 186rpx;
				height: 186rpx;
			}
			.recommend{
				width: 100rpx;
				height: 30rpx;
				position: absolute;
				top: 0;
				left: 0;
				background-color: #D31288;
				color: #fff;
				font-size: 12rpx;
				border-radius: 12rpx 0 20rpx 0;
				text-align: center;
			}
			.img-num{
				position: absolute;
				top: 10rpx;
				right: 10rpx;
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				background-color: #FF0707;
				font-size: 24rpx;
				color: #fff;
				text-align: center;
				line-height: 30rpx;
			}
		}
		.box-right{
			flex: 1;
			.rightTitle{
				display: flex;
				justify-content: space-between;
				.titleLeft{
					display: flex;
					// align-items:center;
					.leftText{
						font-size: 28rpx;
						font-weight: bold;
						color: #1A1A1A;
					}
					.leftname{
						height: 25rpx;
						background: #FA8628;
						padding: 0 4rpx;
						// border-radius: 4rpx;
						font-size: 16rpx;
						color: #fff;
						margin-left: 10rpx;
						margin-top: 10rpx;
					}
				}
				.titleRight{
					display: flex;
					align-items:flex-end;
					line-height:40rpx;
					.rightImg{
						display: flex;
						align-items:flex-end;
// 						width: 30rpx;
// 						height: 30rpx;
						.img1{
							width: 30rpx;
							height: 30rpx;
						}
						.km{
							font-size: 24rpx;
							color: #999;
						}
					}
					
				}
			}
			.centerText{
				color: #999;
				font-size: 20rpx;
				margin: 10rpx 0 10rpx 0;
			}
			.boxBotton{
				display: flex;
				height:60rpx;
				align-items: flex-end;
				border-bottom:2rpx solid #f5f5f5;
				padding-bottom:30rpx;
				width:100%;
				.btn{
					text-align: center;
					color: #999;
					height: 29rpx;
					border: 2rpx solid #999;
					font-size: 18rpx;
					line-height: 29rpx;
					margin-right: 10rpx;
					padding: 0 8rpx;
					border-radius: 20rpx;
					// width: 20%;
				}
				.maxBtn{
					width: 140rpx;
					color: #fff;
					background-color: #F41A43;
					text-align: center;
					line-height: 46rpx;
					border-radius: 40rpx;
					font-size: 20rpx;
					padding: 0 10rpx;
					position: absolute;
					right: 15rpx;
				}
			}
		}
	}
</style>
